<template>
  <div>
    <footer class="footer">
      <!-- This should be `0 items left` by default -->
      <span class="todo-count"
        >剩余<strong>{{ sum }}未完成</strong></span
      >
      <!-- Remove this if you don't implement routing -->
      <ul class="filters">
        <li>
          <a
            :class="{ selected: flag === 1 }"
            @click="$emit('change', 1)"
            href="#/"
            >全部任务</a
          >
        </li>
        <li>
          <a
            :class="{ selected: flag === 2 }"
            @click="$emit('change', 2)"
            href="#/active"
            >进行中</a
          >
        </li>
        <li>
          <a
            :class="{ selected: flag === 3 }"
            @click="$emit('change', 3)"
            href="#/completed"
            >已完成</a
          >
        </li>
      </ul>
      <!-- Hidden if no completed items are left ↓ -->
      <button @click="$emit('qingchu')" class="clear-completed">
        清除已完成
      </button>
    </footer>
  </div>
</template>

<script>
export default {
  name: "FooTer",
  props: {
    list: {
      type: Array
    },
    flag: {
      type: Number
    }
  },
  // 计算剩余数量
  computed: {
    sum () {
      return this.list.filter(item => item.isDone === false).length
    },

  }
};
</script>

<style lang='' scoped>
</style>